<template>
  <div class="depart">
    <div class="top">
      <el-card>
        <pageTop
          :pageTopConfig="pageTopConfig"
          @handleSearchQuery="handleSearchQuery"
          @resetAndQueryList="resetAndQueryList"
        ></pageTop>
      </el-card>
    </div>
    <div class="bottom">
      <el-card>
        <pageBottom
          ref="pageBottomIns"
          :searchData="searchData"
          :pageBottomConfig="pageBottomConfig"
          @handleAddUser="handleAddUser"
          @handleUpdate="handleUpdate"
        >
          <template #red="{ row: { createtime } }">
            <h3 style="color: red">{{ formateDate(createtime) }}</h3>
          </template>
          <template #blue="{ row: { updatetime } }">
            <h3 style="color: blue">{{ formateDate(updatetime) }}</h3>
          </template>
        </pageBottom>
      </el-card>
    </div>
    <pageDialog ref="DialogDOM" :pageDialogConfig="pageDialogConfig"></pageDialog>
  </div>
</template>
<script setup lang="ts">
import { ref } from 'vue'
// import DepartTop from './components/depart/DepartTop.vue'
// import DepartBottom from './components/depart/DepartBottom.vue'
// 封装复用的组件
import pageTop from '@/components/multiplex/pageTop.vue'
import pageBottom from '@/components/multiplex/pageBottom.vue'

import pageTopConfig from '@/global/depart/pageTop.config'
import pageBottomConfig from '@/global/depart/pageBottom.config'

import { formateDate } from '@/utils/formatTime'

import pageDialogConfig from '@/global/depart/pageDialog.config'
import pageDialog from '@/components/multiplex/pageDialog.vue'

// hooks封装
import usePageSame from '@/hooks/usePageSame'

const {
  pageBottomIns,
  searchData,
  DialogDOM,
  handleSearchQuery,
  resetAndQueryList,
  handleAddUser,
  handleUpdate
} = usePageSame()

/* 底下为未提取hooks前的代码 */

// const pageBottomIns = ref<InstanceType<typeof DepartBottom>>()
// const pageBottomIns = ref<InstanceType<typeof pageBottom>>()
// const searchData = ref(null)
// const DialogDOM = ref()

// 这里顶部搜索数据和底部数据展示需要联动，因此将处理操作放在父组件中进行
// const handleSearchQuery = (data: any) => {
//   pageBottomIns.value?.fetchList(data)
//   searchData.value = data
// }

// 子组件清除表单内容，父组件触发事件同时获取最新列表数据
// const resetAndQueryList = () => {
//   // 将页码归一,每次重置的时候都从第一页展示数据，并且分页器也是第一页
//   pageBottomIns.value?.resetPage()
//   pageBottomIns.value?.fetchList()
// }

// const handleAddUser = () => {
//   // 添加用户不需要预览数据，因此只需要传递一个显示弹窗即可
//   DialogDOM.value?.changeDialogVisible(true)
// }
// const handleUpdate = (val: any) => {
//   // 编辑按钮复用添加用户的弹窗组件使用，需要将数据传递过去显示预览
//   // 触发时机就是点击显示弹窗的时候需要将数据传递过去
//   const isEdit = true
//   DialogDOM.value?.changeDialogVisible(true, isEdit, val)
// }
</script>

<style lang="scss" scoped>
.depart {
  width: 100%;
  position: absolute;
}
.top,
.bottom {
  width: 100%;
}
.top {
  margin-bottom: 20px;
}
</style>
